function kai() {

    let img = document.getElementById('taobao')
    //  alert('12')
    if (img.style.display != 'none') {
        img.style.display = 'none';
    } else {
        img.style.display = 'block'
    }
}
function guan() {
    let img = document.getElementById('taobao')
    img.style.display = 'none';
}

//  2.1
function kai1() {
    let li = document.querySelector('.app1')

    if (li.style.display != 'none') {
        li.style.display = 'none';
    } else {
        li.style.display = 'block'
    }
}
function guan1() {
    let li = document.querySelector('.app1');
    li.style.display = 'none';
}


//2.2
function kai2() {
    let li = document.querySelector('.app2')

    if (li.style.display != 'none') {
        li.style.display = 'none';
    } else {
        li.style.display = 'block'
    }
}
function guan2() {
    let li = document.querySelector('.app2');
    li.style.display = 'none';
}
//2.3
function kai3() {
    let li = document.querySelector('.app3')

    if (li.style.display != 'none') {
        li.style.display = 'none';
    } else {
        li.style.display = 'block'
    }
}
function guan3() {
    let li = document.querySelector('.app3');
    li.style.display = 'none';
}
//2.4
function kai4() {
    let li = document.querySelector('.app4')

    if (li.style.display != 'none') {
        li.style.display = 'none';
    } else {
        li.style.display = 'block'
    }
}
function guan4() {
    let li = document.querySelector('.app4');
    li.style.display = 'none';
}

//2.5
function kai5() {
    let li = document.querySelector('.app5')

    if (li.style.display != 'none') {
        li.style.display = 'none';
    } else {
        li.style.display = 'block'
    }
}
function guan5() {
    let li = document.querySelector('.app5');
    li.style.display = 'none';
}
//2.6
function kai6() {
    let li = document.querySelector('.app6')

    if (li.style.display != 'none') {
        li.style.display = 'none';
    } else {
        li.style.display = 'block'
    }
}
function guan6() {
    let li = document.querySelector('.app6');
    li.style.display = 'none';
}
//2.7
function kai7() {
    let li = document.querySelector('.app7')

    if (li.style.display != 'none') {
        li.style.display = 'none';
    } else {
        li.style.display = 'block'
    }
}
function guan7() {
    let li = document.querySelector('.app7');
    li.style.display = 'none';
}
//2`3

// let search = document.querySelector('.search');
// // console.log(search);
// let list = document.querySelector('.result-list');

//  2. 事件监听 获得光标事件  focus

// search.addEventListener('focus', function() {

//     // 显示下拉菜单
//     list.style.display = 'block';
//     // 文本框变色
//     this.classList.add('search');
// })
//  3. 事件监听 失去光标事件  blur
// search.addEventListener('blur', function () {
//     // 隐藏下拉菜单;
//     list.style.display = 'none';
//     // 文本框去色
//     this.classList.remove('search');
// })

// window.onload = function () {
//     alert(2222)
   
//     let search = document.querySelector('.search');
//     let list = document.querySelector('.result-list');
//     alert('sad')
//     search.addEventListener('focus', function () {
     
//         // 显示下拉菜单
//         list.style.display = 'block';
        
//         // 文本框变色
//         this.classList.add('.search');
//     })
//     search.addEventListener('blur', function () {
//         // 隐藏下拉菜单;
//         list.style.display = 'none';
//         // 文本框去色
//         this.classList.remove('.search');
//     })
// }

// 3 隐藏
function kai01() {
    let li = document.querySelector('.li1');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan01 () {
    let li = document.querySelector('.li1');
    li.style.display = 'none';
}
//3.2
function kai02() {
    let li = document.querySelector('.li2');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan02 () {
    let li = document.querySelector('.li2');
    li.style.display = 'none';
}
//3.3
function kai03() {
    let li = document.querySelector('.li3');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan03 () {
    let li = document.querySelector('.li3');
    li.style.display = 'none';
}
//3.4
function kai04() {
    let li = document.querySelector('.li4');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan04 () {
    let li = document.querySelector('.li4');
    li.style.display = 'none';
}

//3.5
function kai05() {
    let li = document.querySelector('.li5');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan05 () {
    let li = document.querySelector('.li5');
    li.style.display = 'none';
}
//3.6
function kai06() {
    let li = document.querySelector('.li6');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan06 () {
    let li = document.querySelector('.li6');
    li.style.display = 'none';
}
//3.7
function kai07() {
    let li = document.querySelector('.li7');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan07 () {
    let li = document.querySelector('.li7');
    li.style.display = 'none';
}
//3.8
function kai08() {
    let li = document.querySelector('.li8');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan08 () {
    let li = document.querySelector('.li8');
    li.style.display = 'none';
}
//3.9
function kai09() {
    let li = document.querySelector('.li9');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan09 () {
    let li = document.querySelector('.li9');
    li.style.display = 'none';
}
//3.10
function kai010() {
    let li = document.querySelector('.li10');
    // alert('efrwe')
    if (li.style.display != 'none') {
         li.style.display = 'none'
    } else {
        li.style.display = 'block'
    }
}
function guan010 () {
    let li = document.querySelector('.li10');
    li.style.display = 'none';
}
//轮播图
window.onload = function () {
    var index = 0;
    //获取⼩圆点的⽗元素ul
    var zeroPoint = document.querySelector(".zeroPoint")



//获取所有图⽚
var imgLis = document.querySelectorAll(".img-wrap li");
    //获取所有的⼩圆点
    let lis = zeroPoint.querySelectorAll("li");
    //⼩圆点点击事件监听
    zeroPoint.addEventListener("click", function (event) {
        let target = event.target;
        for (let [n, li] of lis.entries()) {
            if (li === target) {//更改被点击的⼩圆点的样式，背景⾊为⽩⾊，这⾥通过添加hover类的⽅式实现
                index = n;
                target.className = "hover";
            } else {//否则恢复为⼩圆点的默认样式，这⾥通过去除hover类的⽅式来实现
                li.className = li.className.replace("hover", "");
            }
        }
        setPicture();//设置图⽚
    });
    //左箭头点击事件
    var leftArrow = document.querySelector("#leftArrow");
    leftArrow.addEventListener("click", function (event) {
        index--;//点击左箭头时，index--
        if (index < 0) {//若index < 0 则赋值为4，达到循环的效果
            index = 4;
        }
        setZero();//设置⼩圆点
        setPicture();//设置图⽚
    });
    //右箭头点击事件
    var rightArrow = document.querySelector("#rightArrow");
    rightArrow.addEventListener("click", function (event) {
        index++;
        if (index > 4) {
            index = 0;
        }
        setZero();
        setPicture();
    });
    function setPicture() {
        //遍历所有图⽚
        for (let i = 0, length = imgLis.length; i < length; i++) {
            if (i === index) {//如果这个图⽚是第index个孩⼦，则让它显⽰，并设置淡⼊的动画效果
                imgLis[i].style.display = "block";
                imgLis[i].style.animation = "fadeIn 3s";
            } else {//否则，隐藏，并设置淡出动画
                imgLis[i].style.animation = "fadeout 0s";
                imgLis[i].style.display = "none"
            }
        }
    }
    function setZero() {
        for (let [n, li] of lis.entries()) {
            if (n === index) {//如果是第index个⼩圆点，则修改这个⼩圆点的背景颜⾊为⽩⾊
                li.className = "hover";
            } else {//其他⼩圆点恢复默认样式
                li.className = li.className.replace("hover", "");
            }
        }
    }
    setInterval(function () {//定时器，达到⾃动轮播的效果
        index++;//循环++
        if (index > 4) {//当循环到最后⼀个就再从第⼀个开始
            index = 0;
        }
        setZero();//设置⼩圆点
        setPicture();//设置图⽚
    }, 5000);



    //下拉框
    let search = document.querySelector('.search');
let list = document.querySelector('.result-list');

search.addEventListener('focus', function () {
    // 显示下拉菜单
    list.style.display = 'block';
 
    // 文本框变色
    this.classList.add('.search');
})
search.addEventListener('blur', function () {
    // 隐藏下拉菜单;
    list.style.display = 'none';
    // 文本框去色
    this.classList.remove('.search');
})
}